import React, { Component } from 'react';
import '../styles/Wude.scss'
import { NavBar, Space } from 'antd-mobile'
import { SearchOutline, MoreOutline,RightOutline } from 'antd-mobile-icons'
import * as service from '../api/index'

class Wude extends Component {
    constructor(props) {
        super(props)
        this.state = {
            right: (
                <div style={{ fontSize: 24 }}>
                    <Space style={{ '--gap': '16px' }}>
                        <SearchOutline />
                        <MoreOutline />
                    </Space>
                </div>
            ),
            wdkc:[],
            wdhuodong:[]

        }
    }
   async componentDidMount(){
    var res=await service.user_wdkc()
    var res1=await service.user_wdhuodong()
    this.setState({wdkc:res.data,wdhuodong:res1.data})
    }

    render() {
        return (
            <div className='wude'>
                <NavBar backArrow={false} right={this.state.right}>
                    我的
                </NavBar>
                <div className="nei">
                    <div className="hang">
                        <div className="left">
                            <img src="https://img.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%88%91%E7%9A%84%EF%BC%88%E5%B7%B2%E6%B3%A8%E5%86%8C%E4%B8%BA%E4%BC%9A%E5%91%98%EF%BC%89/u3174.png" alt="" />
                        </div>
                        <div className="right">
                            <div className="shang">小小少年</div>
                            <div className="xia">注册为会员<RightOutline /></div>
                        </div>
                    </div>
                    <div className="hang1">
                        <div className="h1">
                            <div className='ling'>0</div>
                            <div>积分</div>
                        </div>
                        <div className="h1">
                            <div className='ling'>0</div>
                            <div>优惠券</div>
                        </div>
                        <div className="h1">
                            <div className='ling'>0</div>
                            <div>收藏</div>
                        </div>
                        <div className="h1">
                            <div className='iconfont icon-huiyuantequan'></div>
                            <div className='l1'>LV7</div>
                        </div>
                    </div>
                    <div className="hang2">
                        <div className='han1'>我的课程</div>
                        <div className="han2">
                            {
                                this.state.wdkc.map((item,index)=>{
                                    return (
                                        <div className='item' key={index}>
                                            <img src={item.pic} alt="" />
                                            <div className='name'>{item.name}</div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="hang3">
                        {
                            this.state.wdhuodong.map((item1,index1)=>{
                                return (
                                    <div className='item1' key={index1}>
                                            <div className='name'><img src={item1.pic} alt="" />{item1.name}</div>
                                            <div className='biao'><RightOutline /></div>
                                        </div>
                                )
                            })

                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Wude;